Whisper Isle 遊戲連結(PC Only)：whisperisle.app（註：專案每日持續高速演進，撰文當下線上已推進至 v0.2.4）

昨天在 Day 8 聊完了四足動物幾何：當 AI 工具鏈在野狼身上失效時，改用 Python、IK 控制器與解剖學手寫出了一套四拍步態，讓怪物與角色在畫布上真正奔跑了起來。

當世界裡的生物都動起來之後，身為開發者，目光很快會從角色身上移開，投向螢幕的邊界——那就是常駐在畫面底部的血條、經驗值、快捷欄與等級印記：遊戲的 HUD（Heads-Up Display）介面。在傳統軟體工程中，寫介面通常被認為是風險最低的一環：無非就是排版、刻元件、畫進度條，把後端數值映射到前端畫布上。

但 HUD 被整版推翻重寫了四輪（v1 → v2 → v3 → v4）。這四輪重構的代價，催生出了設計閘門：Reference-first。

一、事故現場：三次全綠，三次秒殺

這場事故之所以刻骨銘心，是因為前三版實作並不是因為「Bug 太多」而被退回，相反地，它們在工程指標上全部無懈可擊。

模組化？UI 元件與遊戲狀態徹底解耦，狀態流向單向清晰。測試？全套端對端驗收腳本（acceptance-hud.mjs）一把全綠，HP 扣減、XP 增長、視窗縮放斷言全部 PASS。型別檢查？TypeScript 與 Lint 零錯誤、零警告。但在真實世界裡，軟體工程的及格線，往往只是遊戲體驗的起點。

1. v1：像後台儀表板的「程序化矩形條」AI 最順手的 UI 寫法，就是調用 2D 渲染引擎（Pixi.js）的 Graphics API。在 Canvas 上畫幾個圓角矩形，填上紅色漸層當血條、填上黃色當經驗條，外面描一圈深灰色線條當邊框。當把它推上本機畫面時，映入眼簾的畫面極其滑稽：在充滿厚塗筆觸、暗黑沉鬱的島嶼地圖中央，橫亙著一條散發著廉價 Web 風味的塑膠進度條。否決。

2. 被否決後，AI 開始發揮它的數學長才。它在程式碼裡疊加了大量的程序化濾鏡：外層畫一圈黃銅色雙線、四個角算幾何座標畫上幾顆「鉚釘圓點」、邊框加上 Bevel 浮雕陰影、內層補上徑向漸層。公式極其複雜，但跑出來的成果依然是一場災難：它看起來就像一個「很努力想要假裝成復古金屬風格的 HTML 按鈕」。那種硬算出來的漸層與高光，毫無歲月沉積的磨損感與物理重量，否決。

3. 既然矩形條行不通，第三版我們決定轉向《暗黑破壞神》經典的圓形「血球」設計。但 AI 依然執迷於它的「工程偏執」——它試圖用貝茲曲線去算圓形球體的遮罩、用程式碼模擬半月形的液面反光、並用 screen 混合模式疊加玻璃反光。結果在滿血（HP 100%）時，液面的邊緣曲線被垂直拉伸到了球體最頂端，與玻璃反光重疊，直接在球體頂部炸出了一條刺眼奪目的白色亮環；當角色走在亮色沙灘上時，這條白環宛如一個損壞的螢幕亮點，而在暗色草地上又呈現灰濛濛的髒污感。

根因：綠燈的盲目性與 AI 的工程偏執

這場連環車禍給了我們一個極其嚴肅的教訓：自動化測試是盲目的。

在過去的敏捷開發或 Web 開發中，工程師習慣了「只要測試全綠就能上線」的節奏。但遊戲的 UI 不是單純的資料展示，它是沉浸感（Immersion）的第一道前線。

測試斷言可以驗證 hpBar.scale.y === 0.5，但它驗不出「這個血球像一個塑膠玩具」；
測試斷言可以驗證 liquid.alpha === 1，但它驗不出「球頂的白環在沙地背景下極度突兀」；
測試斷言可以驗證數值文字正確置中，但它驗不出「整個 HUD 缺乏金屬與石材的重量感」。
AI 是一個純粹的符號推理機器，它沒有肉身體感，更缺乏對視覺厚度的審美直覺。

當你給它一個抽象任務（「做一個暗黑風格的 HUD」），它會本能地走向阻力最小、最容易被形式化的路徑——用 Math.sin 算曲線、用 Graphics.fill 填漸層。因為在它的邏輯裡，程式碼是確定的、可量化的；而美術質感是模糊的、難以衡量的。

但真實的遊戲美術，靈魂恰恰藏在那些無法被簡單公式抽象的細節裡：黃銅邊框上的微小鏽蝕、玻璃內壁微弱的暗部折射、牛皮紙經驗條上的纖維紋理。這些東西，你寫一萬行也算不出來。

Reference-first

• 一張靜態參考合成圖（Composite），讓人類肉眼在遊戲背景上看一眼，被否決的成本是 5 分鐘；
• 幾百行繪圖程式碼、調完響應式佈局、補齊所有端對端測試，然後被人類否決，成本是 4 個小時。
  把唯一有效的視覺驗收關卡（User 的肉眼），硬性前置到寫 code 之前。